<template>
  <div class="container">
    <top-com :topId='navId'></top-com>
    <div class="bannerCont">
      <div class="bannerMask">
        <div class="maskLeft">
          <div class="maskTitle">开通私域网店 店铺轻松管理</div>
          <div class="maskdes">让你的营业额提升50%</div>
          <div class="maskVal">
            <p>把“私有的客户资源”转移到商家的“私域网店平台”消费。</p>
            <p>为用户提供便捷的线上购物体验。</p>
            <p>为商家提供高效的店铺管理平台。</p>
            <p>涵盖了从店铺展示-店铺商品下单-订单管理的全流程</p>
            <p>满足了用户便捷购物和商家管理的多方面需求。</p>
          </div>
          <a href="#JoinInput" class="maskBtn">开通网店</a>
        </div>
        <img src="static/img/bannerPhone.png" />
      </div>
    </div>
    <div class="productCont">
      <div class="contName">
        <div class="contName_china">用户端展示(花店演示)</div>
        <div class="contName_Eng">Client display (florist demo)</div>
      </div>
      <div class="productMain">
        <div class="productNav">
          <div @click="productNavFn(index)" :class="productNavId==index?'productNavItemActive':'productNavItem'" :key="index" v-for="(item,index) in productNavArr">
            <img :src="item.img" />
            <div class="productNavName">{{item.val}}</div>
          </div>
        </div>
        <div class="productSwiper">
          <div class="productItem">
            <div class="phoneBox">
              <img class="phoneImg" src="static/img/phoneImg.png" />
              <div class="productImgCont">
                <img class="productImg" :src="productNavArr[productNavId].goodsImg" />
              </div>
            </div>
            <div class="phoneBox" v-if="productNavArr[productNavId].detailImg">
              <img class="phoneImg" src="static/img/phoneImg.png" />
              <div class="productImgCont">
                <img class="productImg" :src="productNavArr[productNavId].detailImg" />
              </div>
            </div>
            <div class="productInfo">
              <div class="productInfoName">{{productNavArr[productNavId].val}}</div>
              <div class="productInfoDes">
                <ul>
                  <li :key="index" v-for="(item,index) in productNavArr[productNavId].desArr">{{ item.val }}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="productCont" style="margin-top: 100px;">
      <div class="contName">
        <div class="contName_china">商家端展示(花店演示)</div>
        <div class="contName_Eng">Merchant side display (florist Demo)</div>
      </div>
      <div class="productMain">
        <div class="productNav">
          <div @click="shopNavFn(index)" :class="shopNavId==index?'productNavItemActive':'productNavItem'" :key="index" v-for="(item,index) in shopNavArr">
            <img :src="item.img" />
            <div class="productNavName">{{item.val}}</div>
          </div>
        </div>
        <div class="productSwiper">
          <div class="productItem">
            <div class="phoneBox">
              <img class="phoneImg" src="static/img/phoneImg.png" />
              <div class="productImgCont">
                <img class="productImg" :src="shopNavArr[shopNavId].goodsImg" />
              </div>
            </div>
            <div class="phoneBox" v-if="shopNavArr[shopNavId].detailImg">
              <img class="phoneImg" src="static/img/phoneImg.png" />
              <div class="productImgCont">
                <img class="productImg" :src="shopNavArr[shopNavId].detailImg" />
              </div>
            </div>
            <div class="productInfo">
              <div class="productInfoName">{{shopNavArr[shopNavId].val}}</div>
              <div class="productInfoDes">
                <ul>
                  <li :key="index" v-for="(item,index) in shopNavArr[shopNavId].desArr">{{ item.val }}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="productCont hasBg" style="margin-top: 100px;">
      <div class="contName">
        <div class="contName_china">开通网店，优势不断</div>
        <div class="contName_Eng">Open shop, advantages continue</div>
      </div>
      <div class="goodCont">
        <div class="goodItem" :key="index" v-for="(item,index) in goodArr">
          <img class="goodImg" :src="item.img" />
          <div class="goodText">
            <div class="goodName">
              <div class="goodLine"></div>
              <div>{{ item.name }}</div>
            </div>
            <div class="goodDes">{{ item.des }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="productCont" style="margin-top: 100px;">
      <div class="contName">
        <div class="contName_china">订单流程</div>
        <div class="contName_Eng">Order process</div>
      </div>
      <div class="orderStep">
        <img src="static/img/stepImg.png" />
      </div>
    </div>
    <div class="productCont hasBg" style="margin-top: 100px;">
      <div class="contName">
        <div class="contName_china">定制您的专属网店</div>
        <div class="contName_Eng">Customize your own shop</div>
      </div>
      <div class="portCont">
        <div class="portItem" :key="index" v-for="(item,index) in portArr">
          <div class="portMask">
            <div class="portBtn">开通{{ item.name }}</div>
          </div>
          <div class="portImg">
            <img :src="item.img" />
          </div>
          <div class="portName">{{ item.name }}</div>
          <div class="portDes">{{ item.des }}</div>
        </div>
      </div>
    </div>
    <div class="productCont" style="margin-top: 100px;">
        <div class="contName">
            <div class="contName_china">运营指南</div>
            <div class="contName_Eng">Operation guide</div>
        </div>
        <div class="stepCont">
            <div class="stepItem" :key="index" v-for="(item,index) in stepArr">
            <div class="stepImg">
                <img :src="item.img" />
            </div>
            <div class="stepInfo">
                <div class="stepName">{{ item.name }}</div>
                <div class="stepVal">
                <ul>
                    <li :key="b" v-for="(a,b) in item.arr">{{ a.val }}</li>
                </ul>
                </div>
            </div>
            </div>
        </div>
      </div>
      <div class="productCont" id="JoinInput" style="margin-top: 100px;">
        <div class="contName">
            <div class="contName_china">开通专属网店</div>
            <div class="contName_Des">如果您对我们的产品感兴趣，想要一款属于您店铺的专属“网店”小程序，我们帮您实现。请填写以下信息，我们将第一时间与您取得联系！</div>
        </div>
        <div class="sendCont">
            <div class="inputCont">
                <input type="text" placeholder="请输入您的姓名" />
            </div>
            <div class="inputCont">
                <input type="number" placeholder="请输入您的电话" />
            </div>
            <div class="subBtn">快速申请</div>
        </div>
      </div>
    <foot-com></foot-com>
  </div>
</template>

<script>
import topCom from '@/components/topCom';
import footCom from '@/components/footCom';
export default {
  components: {topCom,footCom},
  data() {
    return {
      navId:0,
      productNavArr:[
        {img:'static/img/homeIcon.png',val:'店铺首页',goodsImg:'static/img/home.png',detailImg:'static/img/home2.png',desArr:[
          {val:'独特魅力： 精心设计的店铺头像和背景图，彰显品牌的独特魅力；'},
          {val:'贴心服务： 温馨的店铺地址和签名，为您提供贴心的购物体验；'},
          {val:'尊享优惠： 丰富多样的优惠券和限时特惠，让您尊享更多实惠；'},
          {val:'第一资讯： 及时更新的公告和新品上架，让您第一时间了解最新动态；'},
          {val:'畅销榜单： 火热的商品销量排行，助您轻松挑选热门产品；'},
          {val:'精品推荐： 精心挑选的商品列表，满足您的不同需求和品味。'},
        ]},
        {img:'static/img/detailIcon.png',val:'商品详情',goodsImg:'static/img/goodsDetail.png',detailImg:'static/img/goodsDetail2.png',desArr:[
          {val:'独特商品： 丰富多样的商品名称和精彩描述，带给您全新购物体验；'},
          {val:'贴心服务： 商品收藏功能，让您随时随地收藏心仪商品，便于下次查找；'},
          {val:'个性标签： 商品标签，帮助您快速定位喜爱的商品类型；'},
          {val:'视觉盛宴： 商品详情图，展示商品细节，让您全方位了解；'},
          {val:'便捷购物： 加入购物车和立即购买功能，轻松实现心仪商品的购买。'},
        ]},
        {img:'static/img/payOrderIcon.png',val:'订单支付',goodsImg:'static/img/payOrder.png',detailImg:'static/img/payOrder2.png',desArr:[
          {val:'灵活下单方式： 外卖配送下单或到店下单，满足您不同场景的购物需求；'},
          {val:'便捷配送信息： 外卖配送费、起送金额、配送地址及送达时间选择，轻松安排您的收货计划；'},
          {val:'实惠优惠享不停： 多种优惠券选择抵扣使用，让您尽情享受超值优惠；'},
          {val:'会员专享价格： 超级会员价格自动结算，为您提供更贴心的购物体验。'},
        ]},
        {img:'static/img/orderIcon.png',val:'用户订单',goodsImg:'static/img/order.png',detailImg:'static/img/order2.png',desArr:[
          {val:'订单一目了然： 清晰的订单列表，让您随时查看订单状态；'},
          {val:'智能搜索与分类： 快速搜索和分类功能，帮助您轻松找到所需订单；'},
          {val:'便捷支付： 简单易用的订单支付，让您轻轻松松完成交易；'},
          {val:'灵活操作： 支持订单删除、取消订单等功能，满足您的各种需求；'},
          {val:'详尽订单详情： 查看订单详情信息，了解订单情况一目了然。'},
        ]},
        {img:'static/img/userIcon.png',val:'个人中心',goodsImg:'static/img/user.png',detailImg:'static/img/user2.png',desArr:[
          {val:'个性化信息展示： 个性化用户头像、昵称展示，彰显您的独特魅力；'},
          {val:'会员特权尽享： 查看是否开通会员，引导普通会员开通超级会员，尊享更多会员特权；'},
          {val:'会员权益清晰： 超级会员到期时间一目了然，让您随时掌握权益；'},
          {val:'便捷任务管理： 购物车、我的优惠券、消费记录任务栏，轻松管理您的购物任务；'},
          {val:'消费数据一览： 清晰统计账号消费金额总览、订单累计数量、收藏商品总数，掌握消费情况。'},
        ]},
        {img:'static/img/vipIcon.png',val:'会员中心',goodsImg:'static/img/vip2.png',detailImg:'static/img/vip.png',desArr:[
          {val:'会员特权引领： 查看是否开通会员，引导普通会员开通超级会员，尊享更多特权；'},
          {val:'会员权益明晰： 超级会员到期时间清晰展示，让您随时了解会员权益；'},
          {val:'便捷充值功能： 简单易用的开通会员支付功能，让您轻松享受会员特权；'},
          {val:'透明收费明细： 清晰展示会员开通记录、收费及折扣明细，让您放心选择。'},
        ]},
        {img:'static/img/carIcon.png',val:'购物车',goodsImg:'static/img/car.png',detailImg:'',desArr:[
          {val:'便捷购物体验： 购物车商品列表一目了然，轻松管理您的购物清单；'},
          {val:'灵活操作选项： 选择商品进行删除操作，自定义购买商品数量，尽情展现您的选择权；'},
          {val:'快捷结算支付： 简单点击，选择商品结算支付功能，享受快捷支付体验；'},
          {val:'个性化推荐： 猜你喜欢的商品列表，为您推荐更多精彩选择，让购物更加愉快！'},
        ]},
        {img:'static/img/saveIcon.png',val:'收藏列表',goodsImg:'static/img/like.png',detailImg:'',desArr:[
          {val:'珍藏心爱之物： 收藏商品列表，保存您钟爱的商品，随时随地回味；'},
          {val:'便捷管理选项： 选择商品批量删除，轻松管理您的收藏清单，让心动不止于一时。'},
        ]},
        {img:'static/img/couponIcon.png',val:'优惠券',goodsImg:'static/img/coupon.png',detailImg:'',desArr:[
          {val:'丰富优惠券选择： 浏览优惠券列表，发现多样优惠，满足您的不同购物需求；s'},
          {val:'清晰有效期展示： 可用优惠券到期时间清晰呈现，让您不错过任何优惠时机；'},
          {val:'实惠享不停： 优惠券满减金额信息一目了然，省钱购物乐趣倍增；'},
          {val:'便捷管理选项： 已到期优惠券列表、已失效优惠券列表，便捷管理您的优惠券，确保优惠不流失。'},
        ]},
        {img:'static/img/recordIcon.png',val:'消费记录',goodsImg:'static/img/record.png',detailImg:'',desArr:[
          {val:'详尽消费明细： 消费明细列表呈现每一笔消费的详细信息，让您了解每次消费的细节；'},
          {val:'清晰订单编号： 每一笔消费都有独特的订单号，方便您进行订单跟踪和管理；'},
          {val:'准确消费时间： 消费时间清晰记录，让您随时回顾消费历程；'},
          {val:'透明消费金额： 显示消费金额，让您了解每次购物的花费；'},
          {val:'订单类型明晰： 区分消费和退款订单类型，确保您对消费记录了如指掌。'},
        ]},
      ],
      productNavId:0,
      goodArr:[
        {img:'static/img/good14.png',name:'增加销售额',des:'网店不受时间和地点的限制，24小时为您服务，让您的商品随时随地都能被发现和购买；并且没有任何抽成。'},
        {img:'static/img/good1.png',name:'拓展市场',des:'通过网络平台，您可以触达全新的潜在客户群，无论他们身处何地，都可以轻松购买您的产品。'},
        {img:'static/img/good2.png',name:'灵活策略',des:'网店平台为您提供了各种促销和营销工具，如优惠券、折扣活动、年费会员开通等，帮助您吸引更多客户并提升销售额。'},
        {img:'static/img/good4.png',name:'专属的店铺',des:'此《私域网店》平台内仅有商家一家店铺，平台出售的任何商品盈利都为商家所有，没有任何同行竞争。'},
        {img:'static/img/good5.png',name:'终生使用',des:'此《私域网店》开通之后，商家可永久使用，无时间限制，无后续收费。'},
        {img:'static/img/good6.png',name:'简单、便捷',des:'操作简单、便捷，店铺商品轻松网上出售。无需电脑，手机即可，轻松上手。一个人也可轻松管理店铺'},
        {img:'static/img/good7.png',name:'全面店铺管理',des:'商家可以编辑店铺信息、设置会员价格、新增优惠券等，灵活管理店铺运营。'},
        {img:'static/img/good8.png',name:'实时订单管理',des:'商家可查看订单明细和收益情况，掌握实时销售状况，做出及时调整和决策。'},
        {img:'static/img/good9.png',name:'增强用户黏性',des:'商家可设置满减优惠券和设置年费会员及会员折扣，从而让自己的客户开通会员，长期性在店铺购买商品，可长期留住用户。'},
        {img:'static/img/good10.png',name:'便捷的购物体验',des:'用户可以浏览店铺的商品列表和详情，轻松选择心仪的商品并进行下单，同时支持加入购物车和商品收藏功能，提高了用户购物的便利性和灵活性。'},
        {img:'static/img/good12.png',name:'个性化服务',des:'用户可以领取优惠券、充值成为超级会员，享受更多优惠和特权，同时可以查看消费记录和订单详情，方便了解自己的购买情况。'},
        {img:'static/img/good13.png',name:'会员中心',des:'提供了会员中心，用户可以查看个人信息、订单列表等，增强了用户粘性和对商家的忠诚度。享受更多会员特权，提升购物体验。'},
      ],
      portArr:[
        {img:'static/img/huaImg.png',name:'鲜花网店',des:'“绽放真情，私域花店，让每份礼物都如此精彩！”'},
        {img:'static/img/foodImg.png',name:'餐饮网店',des:' “美食之旅，从私域开始，口味原汁原味，尽在您的指尖！”'},
        {img:'static/img/dogImg.png',name:'宠物网店',des:' “宠爱无限，私域宠物店，为您的小伙伴带来专属的呵护！”'},
        {img:'static/img/yifuImg.png',name:'服装网店',des:' “时尚定义，私域时装店，演绎您的个性风采，成为流行风向标！”'},
        {img:'static/img/zxImg.png',name:'装修网店',des:'“打造梦想之家，私域装修店，让每一处空间都闪耀个性光芒！”'},
        {img:'static/img/lifaImg.png',name:'美容网店',des:' “焕发美丽，私域美容院，从头顶到脚尖，完美呈现！”'},
        {img:'static/img/shuiguoImg.png',name:'果铺网店',des:' “鲜果滋味，私域果铺，每一口都是自然的甜蜜！”'},
        {img:'static/img/anmoImg.png',name:'足浴网店',des:'“身心舒畅，私域足浴馆，为您带来身心完美放松！”'},
        {img:'static/img/qixiuImg.png',name:'汽修网店',des:'“行车保障，私域汽车修理厂，让您的座驾始终处于最佳状态！”'},
      ],
      shopNavArr:[
        {img:'static/img/homeIcon.png',val:'商家中心',goodsImg:'static/img/shopHome.png',desArr:[
          {val:'店铺个性展示： 店铺头像与背景图，展现独特魅力，引领潮流风向；'},
          {val:'粉丝与访客统计： 实时显示店铺粉丝数量与访客量，见证您的影响力与人气；'},
          {val:'订单收益一览： 累计收益、订单数量、本月收益、本月订单数量，清晰呈现您的业绩成果；'},
          {val:'多功能任务栏： 店铺编辑、优惠券设置、其他设置，为您提供便捷管理与个性化定制；'},
          {val:'会员特权尊享： 超级会员列表、会员充值记录，尊享特权，畅享尊贵服务；'},
          {val:'消费排行榜： 精准统计消费数据，展示店铺流量与成交情况。'},
        ]},
        {img:'static/img/shopSetIcon.png',val:'店铺设置',goodsImg:'static/img/shopSet.png',desArr:[
          {val:'个性化店铺形象： 店铺头像、店铺名称、店铺签名，展示独特魅力，树立个人品牌；'},
          {val:'便捷联系方式： 店铺联系电话、店铺地址设置，轻松畅通与顾客沟通；'},
          {val:'时尚公告消息： 店铺公告消息设置，即时发布促销活动、最新资讯，吸引更多关注；'},
          {val:'引人背景封面图： 店铺背景封面图设置，打造吸引眼球的视觉效果，增加店铺吸引力。'},
        ]},
        {img:'static/img/couponIcon.png',val:'优惠券设置',goodsImg:'static/img/shopCoupon.png',desArr:[
          {val:'灵活定制优惠券： 自主新增、删除优惠券，灵活应对各类促销需求；'},
          {val:'个性化设置： 满多少减多少，定制优惠力度，让优惠更贴心；'},
          {val:'精准时间掌控： 设置优惠券到期时间，把握促销节点，助您销量飙升；'},
          {val:'商家专属定义： 商家可自行定义优惠券，打造独特品牌形象，吸引更多顾客青睐。'},
        ]},
        {img:'static/img/shopOtherSetIcon.png',val:'其他设置',goodsImg:'static/img/otherSet.png',desArr:[
          {val:'尊贵超级会员特权： 商家可自定义年费超级会员设置，包括年费会员费用与折扣，让您的会员尊享独特特权，提升忠诚度；'},
          {val:'便捷外卖配送管理： 商家可灵活设置外卖配送信息，包括外卖配送费和起送金额，为您的外卖业务提供定制化服务，吸引更多顾客。'},

        ]},
        {img:'static/img/vipIcon.png',val:'会员列表',goodsImg:'static/img/vipRecord.png',detailImg:'static/img/vipList.png',desArr:[
          {val:'会员充值记录一目了然： 实时展示每位会员的充值情况，包含头像、昵称、充值金额、订单号、充值时间，透明呈现每一笔交易；'},
          {val:'灵活筛选： 按日期筛选会员充值记录，轻松查找所需信息，提升操作效率；'},
          {val:'个性折扣特权： 显示每个会员享受的折扣，彰显尊贵特权，增加会员满意度。'},
        ]},
        {img:'static/img/shopSortIcon.png',val:'消费排行',goodsImg:'static/img/shopRecord.png',detailImg:'',desArr:[
          {val:'畅享消费排名： 实时展示消费者的排名，了解消费动态；'},
          {val:'瞬间洞察消费金额： 明晰呈现每位消费者的消费金额，洞察消费状况；'},
        ]},
        {img:'static/img/orderIcon.png',val:'订单情况',goodsImg:'static/img/shopOrder.png',detailImg:'static/img/shopOrderDetail.png',desArr:[
          {val:'智能订单管理： 清晰展示订单列表，配备快速搜索和分类功能，助您轻松管理订单；'},
          {val:'清便捷操作体验： 灵活的订单接单与驳回功能，让您随心处理每一笔交易；'},
          {val:'详尽订单详情： 深入了解每个订单的具体情况，包括订单详情信息，为您提供全方位服务支持。'},
        ]},
        {img:'static/img/shopGoodsIcon.png',val:'店铺商品',goodsImg:'static/img/shopGoods.png',detailImg:'static/img/shopGoodsAdd.png',desArr:[
          {val:'精品商品一目了然： 清晰展示店铺商品列表，便于实时了解商品动态；'},
          {val:'灵活操作体验： 支持商品的删除、新增和编辑功能，让您随时调整商品信息；'},
          {val:'个性化商品定价： 新增商品可自定义活动标签，自由设置售价，满足不同需求。'},
        ]},
      ],
      shopNavId:0,
      stepArr:[
        {img:'static/img/number1.png',name:'准备工作',arr:[
          {val:'产品准备：店铺对应的“网店”小程序'},
          {val:'店铺配置：配置网店信息及上架出售的商品，建议配置得有吸引力，例如：满减优惠券设置、商品吸引人、价格实惠等'},
          {val:'会员及外卖配置：配置店铺会员用户收费标准及折扣'},
          {val:'准备资料：营业执照、身份证号、邮箱'},
        ]},
        {img:'static/img/number2.png',name:'引流方式',arr:[
          {val:'每天进店的新客户，通过赠送小礼物或让他们“网店”优惠下单，可引导他们关注并熟悉您的“网店”。'},
          {val:'在您的店铺粉丝群发放几个小红包并分享您的“网店”链接，让粉丝后续有需求在“网店”购物即可。'},
          {val:'让您的粉丝推荐新用户关注您的“网店”，赠送他们一些优惠或发放一个小红包，为您快速提升“网店”粉丝量'},
          {val:'打印店铺宣传单，找兼职传单员去发一波，引一波粉丝关注。'},
        ]},
        {img:'static/img/number3.png',name:'运营思维',arr:[
          {val:'把日常用户、已有的客源、店铺粉丝引入到您的“网店”进行后续消费；'},
          {val:'把每一个用户或粉丝促进二次或多次消费，不流失用户资源，把用户转化为长期有效的消费者。'},
          {val:'设置店铺优惠券和店铺超级会员，给用户打折扣，提升用户黏性和用户对商家的忠诚度。'},
          {val:'前期可靠会员费快速回本，店铺不再担心抽成问题，所成交金额全归商家所有。'},
          {val:'慢慢经营私域网店，慢慢积累客源，日积月累壮大网店，通过此网店为店铺额外提升营业额。'},
          {val:'有一个属于您的“网店”，可以和线下实体店结合，并线灵活策略方案经营，成为一个全模式店铺。'},
          {val:'5分钟轻松上手、操作便捷，无需电脑，手机轻松操作管理。'},
        ]},
        {img:'static/img/number4.png',name:'预算成本',arr:[
          {val:'软件费用：购买《私域网店》软件，1280元终生版。'},
          {val:'宣传单打印：0.1元/张（看商家自己需求，非必需）'},
          {val:'微信认证：300元/年'},
          {val:'域名证书：98元/年'},
          {val:'赠送：终生产品维护及搭建，服务器免费使用，海报设计，前期指导运营。'},
          {val:'承诺：无后续费用、终生都可使用。'},
        ]},
        {img:'static/img/number5.png',name:'适宜商家',arr:[
          {val:'各行各业商家都可以。'},
          {val:'只要您要为您的店铺开通一个专属于您的“网店”，我们都可以为您实现。'},
        ]},
      ],
    };
  },
  props: {},
  methods: {
    productNavFn(index){
      this.productNavId = index
    },
    shopNavFn(index){
      this.shopNavId = index
    },
  },
  mounted() {},
  created() {}
};
</script>

<style scoped lang="less">
.container{
  width: 100%;
  
  .bannerCont{
    width: 100%;
    background-color: #fbf1f1;
    .bannerMask{
      width: 100%;
      padding: 150px 100px 50px;
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
      display: flex;
      color: #ea9fa0;
      img{
        height: 500px;
      }
      .maskLeft{
        margin-right: 150px;
        .maskTitle{
          font-size: 40px;
          margin-bottom: 20px;
        }
        .maskdes{
          font-size: 24px;
          margin-bottom: 30px;
        }
        .maskVal{
          font-size: 16px;
          p{
            margin: 5px 0;
          }
        }
        .maskBtn{
          margin-top: 50px;
          width: 160px;
          // background-color: #fff;
          color: #ea9fa0;
          border-radius: 30px;
          line-height: 44px;
          border: 1px solid #ea9fa0;
          text-align: center;
          cursor: pointer;
          transition: all 0.15s linear;
          display: block;
          text-decoration: none;
        }
        .maskBtn:hover{
          background-color: #ea9fa0;
          border:1px solid #ea9fa0;
          color: #fff;
        }
      }
    }
  }
  .productCont{
    width: 90%;
    margin: 50px auto;
    .contName{
      width: 100%;
      text-align: center;
      color: #ea9fa0;
      .contName_china{
        font-size: 30px;
        font-weight: bold;
      }
      .contName_Eng{
        font-family: serif;
        font-size: 16px;
      }
      .contName_Des{
        margin-top: 10px;
      }
    }
    .productMain{
      margin-top: 50px;
      display: flex;
      .productNav{
        border-radius: 10px;
        overflow: hidden;
        .productNavItem,.productNavItemActive{
          width: 200px;
          padding: 0 15px;
          height: 55px;
          display: flex;
          align-items: center;
          background-color: #ea9fa0;
          cursor: pointer;
          border-bottom: 1px solid #fff;
          img{
            width: 35px;
            height: 35px;
            margin-right: 15px;
          }
          .productNavName{
            font-size: 18px;
          }
        }
        .productNavItem{
          background-color:#fbf1f1;
        }
        .productNavItemActive{
          color: #fff;
        }
      }
      .productSwiper{
        flex: 1;
        width: 200px;
        margin-left: 50px;
        .productItem{
          width: 100%;
          display: flex;
          .phoneBox{
            width: 280px;
            position: relative;
            text-align: center;
            margin-right: 30px;
            img{
              width: 100%;
            }
            .phoneImg{
              position: absolute;
              top: 0;
              left: 0;
              z-index: 2;
            }
            .productImgCont{
              width: 245px;
              margin: 0 auto;
              overflow: hidden;
              border-radius: 10px;
              margin-top: 10px;
            }
            .productImg{
              width: 100%;
              border-radius: 20px;
            }
          }
          .productInfo{
            flex: 1;
            width: 100px;
            margin-left: 50px;
            .productInfoName{
              font-size: 25px;
            }
            .productInfoDes{
              font-size: 18px;
              margin-top: 30px;
              ul{
                padding-left: 0;
                li{
                  margin-bottom: 15px;
                }
              }
            }
          }
        }
      }
    }
    .portCont{
      width: 100%;
      margin-top: 30px;
      justify-content: space-between;
      background-color: #fbf1f1;
      display: flex;
      flex-wrap: wrap;
      .portItem{
        width: 21%;
        margin: 20px 6%;
        text-align: center;
        background-color: #fff;
        padding: 15px;
        box-sizing: border-box;
        background-color: #ea9fa0;
        border-radius: 15px;
        color: #fff;
        overflow: hidden;
        position: relative;
        .portMask{
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          position: absolute;
          background-color: rgba(0, 0, 0, 0.3);
          display: flex;
          justify-content: center;
          align-items: center;
          opacity: 0;
          transition: all 0.3s linear;
          .portBtn{
            width: 150px;
            background-color: #fff;
            color: #ea9fa0;
            line-height: 40px;
            border-radius: 25px;
            cursor: pointer;
          }
        }
        .portImg{
          width: 100%;
          text-align: center;
          img{
            width: 35%;
          }
        }
        .portName{
          font-size: 22px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .portDes{

        }
      }
      .portItem:hover .portMask{
        opacity: 1;
      }
    }
    .orderStep{
      width: 100%;
      img{
        width: 100%;
      }
    }
    .goodCont{
      width: 100%;
      display: flex;
      padding: 30px 50px;
      box-sizing: border-box;
      flex-wrap: wrap;
      .goodItem{
        width: 45%;
        margin: 0 2.5%;
        // background-color: #ea9fa0;
        padding: 30px;
        box-sizing: border-box;
        border-radius: 15px;
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        .goodImg{
          width: 100px;
        }
        // color: #fff;
        .goodText{
          margin-left: 30px;
          color: #666;
          .goodName{
            font-size: 24px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            color: #ea9fa0;
            .goodLine{
              width: 3px;
              height: 24px;
              background-color: #ea9fa0;
              border-radius: 2px;
              margin-right: 10px;
            }
          }
        }
      }
    }
    .stepCont{
      width: 100%;
      display: flex;
      margin-top: 20px;
      flex-wrap: wrap;
      .stepItem{
        width: 80%;
        margin: 30px auto;
        box-sizing: border-box;
        display: flex;
        .stepImg{
          width: 60px;
          height: 60px;
          font-size: 0;
          border-radius: 50%;
          background-color: #ea9fa0;
          justify-content: center;
          display: flex;
          align-items: center;
          margin-right: 15px;
          img{
            width: 70%;
          }
        }
        .stepInfo{
          width: 10px;
          flex: 1;
          .stepName{
            font-size: 24px;
            font-weight: bold;
            line-height: 60px;
          }
          ul{
            padding-left: 0;
            li{
              margin-bottom: 10px;
            }
          }
        }
      }
    }
    .sendCont{
        display: flex;
        width: 100%;
        margin: 30px auto;
        background-color: #fbf1f1;
        padding: 15px;
        // justify-content: space-between;
        box-sizing: border-box;
        border-radius: 5px;

        .inputCont{
            background-color: #fff;
            padding: 15px 15px;
            box-sizing:border-box;
            border-radius: 5px;
            flex: 1;
            margin-right: 20px;
            input{
                width: 100%;
                background: none;
                border: none;
                outline: none;
                color: #ea9fa0;
            }
        }
        .subBtn{
            line-height: 54px;
            width: 180px;
            text-align: center;
            background-color:#ea9fa0;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s linear;
        }
        .subBtn:hover{
            opacity: 0.7;
        }
      }
  }
  .hasBg{
    background-color: #fbf1f1;
    padding: 50px 0;
    border-radius: 15px;
  }
  
}
</style>
